<template>
    <div class="box">
      <div class="box_one"></div>
      <div class="box_two"></div>
      <div class="box_three"></div>
      <div class="box_four"></div>
      <div class="zhuce">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="账号名称" prop="username">
            <el-input v-model="ruleForm.username" clearable></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="telphone">
            <el-input v-model="ruleForm.telphone" clearable></el-input>
          </el-form-item>
          <el-form-item label="账号密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" clearable></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" clearable></el-input>
          </el-form-item>
          <el-form-item label="身份验证码">
            <el-input  v-model="ruleForm.identify" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm2')">注册</el-button>
            <el-button @click="returnForm">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  <script>
  import axios from 'axios';
  export default {
    data() {
      var checkUser = (rule, value, callback) => {
        const regUser = /^[a-zA-Z0-9_-]{3,16}$/
        if (regUser.test(value)) {
          return callback()
        }
        callback(new Error('用户名不能为空'))
      }
      var checkMobile = (rule, value, callback) => {
        const regUser = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/
        if (regUser.test(value)) {
          return callback()
        }
        callback(new Error('手机号码不能为空'))
      }
      
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass')
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        ruleForm: {
          username: '',
          telphone: '',
          password: '',
          checkPass: '',
          identify:''
        },
        rules: {
          username: [{ validator: checkUser, trigger: 'blur' }],
          telphone: [{ validator: checkMobile, trigger: 'blur' }],
          password: [{ validator: validatePass, trigger: 'blur' }],
          checkPass: [{ validator: validatePass2, trigger: 'blur' }]
        }
      }
    },
    methods: {
      returnForm() {
        // 返回login界面
        this.$router.push('/loginPage')
      },
      submitForm() {

        let registerDate = {
          "username":"",
          "telphone":"",
          "password":"",
          "isadmin":""
        }
        registerDate.username = this.ruleForm.username;
        registerDate.telphone = this.ruleForm.telphone;
        registerDate.password = this.ruleForm.password;
        registerDate.isadmin = this.ruleForm.identify;

        //提交去后端验证
        axios.post("http://localhost:8080/register",registerDate).then((result)=>{
          if(result.data.code==0)
          {
            //跳转到注册错误页面
            this.$message.error("输入有误或用户已存在");
          }
          else
          {
            //跳转到登录或者跳转到主页
            this.$message.success("恭喜！注册成功");
            this.$router.push('/loginPage')
          }
        })

      }
    }
  }
  </script>
  <style lang="scss" scoped>
  .box {
    position: absolute;
    
    left: 16%;
    height: 700px;
    background-color: #384b5f;
    width: 1000px;
  }
  .box_one{
    position: absolute;
    right: 85%;
    top: 10%;
    height: 200px;
    width: 200px;
    background-color: #003300b8;
  }
  .box_two{
    position: absolute;
    left: 95%;
    top: 75%;
    height: 200px;
    width: 200px;
    background-color: #669933bc;
  }
  .box_three{
    position: absolute;
    top: 70%;
    right: 90%;
    height: 200px;
    width: 200px;
    background-color: #cccc99af;
  }
  .box_four{
    position: absolute;
    top: 15%;
    right: 20%;
    height: 200px;
    width: 200px;
    background-color: #e0784856;
  }
  .zhuce {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 450px;
    background-color: #fff;
    border-radius: 3px;
  }
  .el-form-item {
    margin-top: 30px;
    width: 400px;
  }
  </style>
  
  